<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
   
    
    <main class="py-8">
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden -z-10">
        <div class="absolute top-20 -left-10 w-72 h-72 bg-primary opacity-10 rounded-full filter blur-3xl"></div>
        <div class="absolute bottom-20 right-10 w-80 h-80 bg-accent opacity-10 rounded-full filter blur-3xl"></div>
      </div>   
      <CardGenerator />
    </main>
    
    
  </div>
</template>

<script>
import { Edit as ElIconEdit } from '@element-plus/icons-vue'
import CardGenerator from './components/CardGenerator.vue'

export default {
  name: 'App',
  components: {
    CardGenerator,
    ElIconEdit,

  },
  data() {
    return {
      showEnvTest: true // 设置为true显示环境变量测试组件，生产环境可设为false
    }
  }
}
</script>

<style>
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-primary {
  --tw-gradient-from: var(--color-primary);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.to-accent {
  --tw-gradient-to: var(--color-accent);
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.text-transparent {
  color: transparent;
}

@media (prefers-color-scheme: dark) {
  .dark\:from-gray-900 {
    --tw-gradient-from: var(--color-gray-900);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(17, 24, 39, 0));
  }
  
  .dark\:to-gray-800 {
    --tw-gradient-to: var(--color-gray-800);
  }
  
  .dark\:bg-gray-800 {
    background-color: var(--color-gray-800);
  }
  
  .dark\:bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  
  .dark\:bg-gray-700 {
    background-color: var(--color-gray-700);
  }
  
  .dark\:border-gray-700 {
    border-color: var(--color-gray-700);
  }
  
  .dark\:border-gray-800 {
    border-color: var(--color-gray-800);
  }
  
  .dark\:text-gray-300 {
    color: var(--color-gray-300);
  }
  
  .dark\:text-gray-400 {
    color: var(--color-gray-400);
  }
  
  .dark\:text-gray-500 {
    color: var(--color-gray-500);
  }
  
  .dark\:hover\:bg-gray-600:hover {
    background-color: var(--color-gray-600);
  }
  
  .dark\:bg-opacity-80 {
    --tw-bg-opacity: 0.8;
  }
}

.-z-10 {
  z-index: -10;
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}

.filter {
  filter: var(--tw-filter);
}

.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-filter);
}
</style> 